<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="import_list content">
      <e-heading>添加学员</e-heading>
      <h2 class="class_title">班级名称：{{classData.trainClassName}}</h2>
      <div class="class_list">
        <el-row>
          <el-col class="el_col" :span="9">报名课程：{{classData.trainCourseName}}</el-col>
          <el-col class="el_col" :span="9">校区：{{classData.schoolName}}</el-col>
          <el-col class="el_col" :span="6">班别：{{classData.classType}}</el-col>
        </el-row>
      </div>
      <el-form v-bind="getFormProps()" label-width="80px">
        <el-row>
          <el-col class="el_col" :span="6" style="margin-bottom:6px;">
            <el-select v-model="form.searchType" placeholder="请选择">
              <el-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col class="el_col" :span="7" style="margin-bottom:6px;">
            <el-input v-model="form.userName" placeholder="请输入学员姓名" style="width:95%;"></el-input>
          </el-col>
          <el-col class="el_col" :span="2" style="margin-bottom:6px;">
            <el-button size="small" type="primary-plain" native-type="submit" :loading="loading" @click="handleSearch()">搜索</el-button>
          </el-col>
        </el-row>
        <p class="impot_tips">带 <i class="el-icon-star-on"></i> 标识的学员已在该班，不可操作</p>
      </el-form>
      <p>请选择要安排进该班的学员，已选<span style="color:#ff7000">{{submitId.length}}</span>人&nbsp;&nbsp;&nbsp;<span class="impot_tips qtips" v-if="form.searchType != 1">注:此处分班的学员不消耗报名次数</span></p>
      <div class="import_table">
        <el-table ref="multipleTable" :data="train_student_signup.list" stripe tooltip-effect="dark" style="width: 100%" @select="handleOneChange" @select-all="handleAllChange" @selection-change="handleSelectionChange" empty-text="暂无学员">
          <el-table-column type="selection" align="center" width="35" :selectable="checkboxInit">
          </el-table-column>
          <el-table-column align="left" label="姓名" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-star-on" v-if="scope.row.joinType"></i> {{scope.row.name}}
            </template>
          </el-table-column>
          <el-table-column label="报名时间" align="center" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.signUpTime ? new Date(scope.row.signUpTime).format() : '-'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="报名来源" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              {{['平台报名','后台录入'][scope.row.signSource]}}
            </template>
          </el-table-column>
          <el-table-column prop="parentMobile" align="center" label="监护人手机" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" label="报名费" width="95" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.signupFee | formatMoney}}
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" width="50" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.sex ? ['','男','女'][scope.row.sex] : '-'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="年龄" width="50" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.age ? scope.row.age : '-'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="证件号码" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.cardNo ? scope.row.cardNo : '-'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="link" @click="handleShowStdent(scope.row.studentId)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination v-if="train_student_signup.total"
        v-bind="getPaginationProps(train_student_signup)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
      <div class="button-box">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmitImport" :disabled="!submitId.length > 0">确 定</el-button>
      </div>
      <!--查看学员详情-->
      <el-dialog
        title="学员详情"
        :visible.sync="dialogVisible">
        <div class="detail-top">
          <student-detail :studentDetailInfo="train_student_detail" :isDialog="true"></student-detail>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import trainApi from 'api/train'
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
import StudentDetail from '../student/components/StudentDetail'
export default {
  mixins: [pagingList],
  components: {
    StudentDetail
  },
  computed: {
    ...mapGetters({
      train_student_detail: 'train_student_detail', // 学员详情
      train_student_signup: 'train_student_signup' // 学员列表
    })
  },
  beforeCreate () {
    trainApi.trainClassInfoShow({
      id: this.$route.query.classId
    }).then((res) => {
      this.classData = res.data
    })
  },
  mounted () {
    if (this.$route.query.searchType) {
      this.form.searchType = Number(this.$route.query.searchType)
    }
  },
  data () {
    return {
      classData: '',
      loading: false,
      dialogVisible: false,
      submitStucents: [],
      submitId: [],
      query: this.getQuery({
        rows: 15
      }),
      selectStudents: [],
      studentData: '',
      form: {
        searchType: 1,
        userName: ''
      },
      selectList: [{
        label: '已购买该课程的学员',
        value: 1
      }, {
        label: '所有学员',
        value: 2
      }]
    }
  },
  methods: {
    fetch () {
      let scope = this
      scope.loadmain = true
      setTimeout(function () {
        scope.query.classId = scope.$route.query.classId
        scope.query.classesId = scope.classData.classesId
        scope.query.courseId = scope.classData.courseId
        scope.query.schoolId = scope.classData.schoolId
        scope.query.searchType = scope.form.searchType
        scope.query.userName = scope.form.userName
        scope.$store.dispatch('train_student_signup', scope.query)
        scope.selectTable()
      }, 600)
    },
    selectTable () {
      let scope = this
      setTimeout(function () {
        if (scope.train_student_signup.list) {
          scope.train_student_signup.list.forEach(row => {
            if (row.joinType === 1) {
              scope.$refs.multipleTable.toggleRowSelection(row)
              row.isDisabled = true
            }
          })
        }
      }, 700)
    },
    handleCancel () { // 取消
      this.$router.push({path: '/training/class'})
    },
    checkboxInit (row, index) { // 设置表格是否禁用
      if (row.isDisabled) {
        return false
      } else {
        return true
      }
    },
    handleOneChange (val, row) { // 单选事件
      let isDisabled
      if (this.selectStudents.includes(row)) { // 选中
        isDisabled = true
      } else {
        isDisabled = false
      }
      this.train_student_signup.list.forEach((item) => {
        if (item.joinType === 0 && item.name === row.name && item.parentMobile === row.parentMobile && item.id !== row.id) {
          item.isDisabled = isDisabled
        }
      })
    },
    handleAllChange (val) { // 全选事件
      if (val.length === this.train_student_signup.total) { // 全选
        let res = [this.train_student_signup.list[0]]
        for (var i = 1; i < this.train_student_signup.list.length; i++) {
          if (this.train_student_signup.list[i].joinType === 0) {
            let repeat = false
            for (var j = 0; j < res.length; j++) {
              if (this.train_student_signup.list[i].name === res[j].name && this.train_student_signup.list[i].parentMobile === res[j].parentMobile) {
                repeat = true
                this.train_student_signup.list[i].isDisabled = true
                this.$refs.multipleTable.toggleRowSelection(this.train_student_signup.list[i])
                break
              }
            }
            if (!repeat) {
              res.push(this.train_student_signup.list[i])
            }
          }
        }
      } else {
        this.train_student_signup.list.map(item => {
          if (item.joinType === 0) {
            item.isDisabled = false
          }
        })
      }
    },
    handleSearch () { // 搜索
      this.query.searchType = this.form.searchType
      this.query.userName = this.form.userName
    },
    handleSubmitImport () { // 发起请求
      let trainStudentClassImportReq = {
        classId: this.$route.query.classId,
        searchType: this.form.searchType,
        studentIds: this.submitId,
        studentSignupId: this.submitStucents
      }
      // this.$emit('success', array)
      trainApi.importStudent(JSON.stringify(trainStudentClassImportReq), {context: this, successMsg: '学员分班成功'}).then(() => {
        this.$router.push({path: '/training/class/detail', query: {id: this.$route.query.classId, crruid: this.classData.courseId}})
      })
    },
    handleSelectionChange (val) { // 选中值
      this.selectStudents = val
      this.submitStucents = []
      this.submitId = []
      this.selectStudents.forEach((item) => {
        if (!item.isDisabled && item.joinType === 0) {
          this.submitStucents.push(item.id)
          this.submitId.push(item.studentId)
        }
      })
    },
    handleShowStdent (studentId) { // 查看学员详情
      this.dialogVisible = true
      this.$store.dispatch('train_student_detail', {studentId: studentId})
    }
  }
}
</script>
<style lang="scss">
.import_list{
  .el-dialog--small{
    width:880px;
  }
  .el-loading-mask{
    height:100%!important;
  }
  .el-form{
    border-bottom:1px solid #efefef;
    padding-bottom:20px;
    margin-bottom:20px;
  }
  .class_title{
    font-size:16px;
    margin-bottom: 15px;
  }
  .el_col{
    margin:0 0 22px 0;
  }
  .impot_tips{
    color:#999;
    font-size: 12px;
  }
  .qtips{
    color:#ff7000;
  }
  .el-button--small{
    min-width: 0;
    padding:12px 20px;
  }
  .el-icon-star-on{
    color:#ff7000;
  }
  .class_list{
    color:#00bb90;
    font-weight:bold;
    line-height:1.3;
    .el-col{
      padding:0 5px 0 0;
    }
  }
  .detail-top{
    padding:10px 25px;
  }
  .el-dialog__body{
    padding-bottom:0;
  }
  .import_table{
    margin:10px 0 20px 0;
    .el-checkbox{
      margin:0;
    }
    .el-table .cell{
      font-size:12px;
      padding:0 10px;
    }
  }
}
</style>
